<template>
    <div class="table">
        <tableComponent class="mg-t-20" :table-data="tableData" :table-head="tableHead" 
            @selection-change="handleSelectionChange" :page-info="pageInfo" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
            <template #operate="scope">
                <div class="flex">
                    <el-button type="text" size="small" @click="toDetail(scope.row)">查看</el-button>
                </div>
            </template>
        </tableComponent>
        <!-- <el-table :data="tableProjectData" style="width: 100%" :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }" empty-text="暂无数据">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="date" label="预支日期" />
                <el-table-column prop="enterpriseNum" label="企业数" />
                <el-table-column prop="peopleNum" label="人数" :formatter="(row: { signTimeStart: string }) =>
                    row.peopleNum
                        ? row.peopleNum + '人'
                        : '暂无'
                    " />
                <el-table-column prop="totalAccount" label="总金额（元）" :formatter="(row: { signTimeEnd: string }) =>
                    row.totalAccount ? '¥' + row.totalAccount : '暂无'
                    " />
                <el-table-column label="操作">
                    <template #default="scope">
                        <p style="color:#1989FA" class="point" @click="
                            toDetail(
                                scope.row.id,
                                scope.row.serveCompanyName,
                                scope.row.projectName
                            )
                            ">
                            详细
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" v-model:currentPage="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
                @size-change="projectSizeChange" @current-change="projectHandleChange">
            </el-pagination> -->
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import tableComponent from '@/components/table-component/index.vue';
import { queryAdvanceNote } from '@/api/advance.ts';

import { dateFormat } from '@/utils/util'
import { shortcuts } from '@/utils/global'
import { ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash';
// import searchBox from './search-box.vue';

export default defineComponent({
    name: 'OrderList',
    props: {
        searchData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            queryData: {} as any,
            tableHead: [
                {
                    prop: 'index'
                },
                {
                    prop: 'advanceDate',
                    label: '预支日期'
                },
                {
                    prop: 'serveCompanyCount',
                    label: '企业数'
                },
                {
                    prop: 'advanceNumber',
                    label: '人数'
                },
                {
                    prop: 'totalAdvanceAmount',
                    label: '总金额（元）',
                    color: '#FF7642'
                },
                {
                    prop: 'operate',
                    label: '操作',
                    width: 120,
                    fixed: 'right'
                },
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
            ] as any,
            tableData: [] as any,
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                total: 0
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
            } as any,
        }
    },
    components: {
        tableComponent
    },
    watch: {
        searchData: {
            handler(newval) {
                if (newval) {
                    this.queryData = newval
                    // this.getData()
                }
            },
            // deep: true
        }
    },
    methods: {
        getData() {
            const query = cloneDeep(this.queryData)
            query.pageNum = this.pageInfo.pageNum
            query.pageSize = this.pageInfo.pageSize
            queryAdvanceNote(query).then((res: any) => {
                this.tableData = res.list || []
                this.pageInfo.total = res.totalCount
                this.$emit('countData', {
                    amount: res.totalAmount,
                    count: res.totalCount
                })
            })
        },
        handleSelectionChange(row: any) {
            const selects = row.map((i: any) => i.advanceDate)
            this.$emit('selects', selects)
        },
        handleSizeChange(ev: number) {
            this.pageInfo.pageSize = ev
            this.getData()
        },
        handleCurrentChange(ev: number) {
            this.pageInfo.pageNum = ev
            this.getData()
        },
        toDetail(row: any) {
            this.$router.push({
                path: '/advance/applayDetail',
                query: {
                    date: row.advanceDate,
                    auditStatus: 1
                }
            })
        }
    }
})
</script>
<style lang="stylus" scoped>
table()
.block
    padding: 10px 24px 0;
    position relative
:deep().date-solt
    width 241px
    margin-right 20px
.operation
    .btn,.btn-green
        width 113px
        height 40px
        margin-left 20px

:deep().el-tabs__header.is-top
    display inline-block
:deep().el-tabs__nav-scroll
    padding-right 20px
.seize
    display flex
    justify-content space-between
    align-items flex-start
    position absolute
    right 20px
    top 10px
.num-time-left
    width 300px
    height 40px
    flex-shrink 1
.num-time
    display: flex
    align-items: center
.detail-key
    color: #202536
    font-weight: bold
.detail-value
    color: #FF7E68
</style>